import { computed } from "vue";
import { pick, without } from "lodash-es";
import {CommonDefaultProps, TextComponentProps, isEditing, textDefaultProps} from "../defaultProps"


export const useComponentCommonOld =(props: any, picks: string[]) => {
  const styleProps = computed(() => {
    return pick(props, picks);
  })

  const handleClick = () => {
    if (props.actionType === 'url' && props.url) {
      window.location.href = props.url;
    }
  }

  return {
    styleProps,
    handleClick
  }
}

const useComponentCommon =(props: Readonly<Partial<CommonDefaultProps & isEditing>>, picks: string[]) => {
  const styleProps = computed(() => {
    return pick(props, picks);
  })

  const handleClick = () => {
    console.log("useComponentCommon handleClick props.isEditing", props.isEditing);
    if (props.actionType === 'url' && props.url && !props.isEditing) {
      window.location.href = props.url;
    }
  }

  return {
    styleProps,
    handleClick
  }
}

export default useComponentCommon


// 把上面的拆成了2个
export const defaultStyles = without(Object.keys(textDefaultProps), 'actionType', 'url', 'text')
export const  useStylePick = (props: any, pickStyles = defaultStyles) => {
  return computed(() => pick(props, pickStyles))
}

export const useComponentClick = (props: any) => {
  const handleClick = () => {
    if (props.actionType && props.url && !props.isEditing) {
      window.location.href = props.url
    }
  }
  return handleClick
}
